<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-09-08 17:09:58
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2023-11-24 09:27:33
 * @FilePath: /things-admin/src/view/signlog/Integral.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="mian_content">
    <div class="tool_bar">
      <Button
        type="primary"
        icon="md-add"
        style="margin: 0 10px 0 0"
        size="default"
        @click="AddPointMsg"
        >新增积分
      </Button>
      <Input
        class="searchId"
        v-model="searchId"
        type="text"
        placeholder="请输入查询id"
        maxlength="16"
      />
      <Button
        type="primary"
        icon="ios-search"
        style="margin: 0 10px"
        size="default"
        @click="getSearchId"
        >查询
      </Button>
      <Button
        icon="md-refresh"
        style="margin-right: 10px"
        size="default"
        @click="refreshData"
        >重置</Button
      >
    </div>
    <div class="table">
      <Table border :columns="columns" :data="data" max-height="520">
        <template #day="{ row }">
          <strong>{{ row.day }}</strong>
        </template>
        <template #action="{ row, index }">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(row)"
            >编辑</Button
          >
          <Button type="error" size="small" @click="remove(row.id)"
            >删除</Button
          >
        </template>
      </Table>
    </div>
    <Modall
      :isShow="isShow"
      :title="title"
      @changeData="changeData"
      :signPointsId="signPointsId"
      :signPointsDay="signPointsDay"
      :signPointsPoint="signPointsPoint"
    />
    <Modal
      v-model="modal"
      title="删除"
      @on-ok="ok"
      @on-cancel="cancel"
    >
    <p>是否要删除这条数据</p>
    </Modal>
    
    <!-- <div class="page">
      <div></div>
      <Page :total="40" size="small" show-elevator show-sizer />
    </div> -->
    
  </div>
</template>

<script>
import { findAll } from "../../base/api/Integral.ts";
import { AddPoint } from "../../base/api/Integral.ts";
import { deleteId } from "../../base/api/Integral.ts";
import { searchMsg } from "../../base/api/Integral.ts";
import { updateMsg } from "../../base/api/Integral.ts";
import Modall from "./components/Modal";
export default {
  components: { Modall },
  data() {
    return {
      columns: [
        {
          title: "签到天数",
          slot: "day",
        },

        {
          title: "签到积分",
          key: "point",
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          align: "center",
        },
      ],
      modal: false,
      id: "",
      searchId: "",
      isShow: false,
      signPointsId: null,
      signPointsDay: null,
      signPointsPoint: null,
      title: "",
      data: [],
    };
  },
  methods: {
    show(data) {
      this.title = "编辑";
      this.isShow = true;
      this.signPointsId = data.id;
      this.signPointsDay = data.day;
      this.signPointsPoint = data.point;
    },
    //删除id
    remove(index) {
      this.id = index;
      this.modal = true;
    },
    //查询id
    getSearchId() {
      searchMsg({ id: Number(this.searchId) }).then((res) => {
        this.data = [];
        let obj = {};
        obj.id = res.data.id;
        obj.day = res.data.day;
        obj.point = res.data.point;
        this.data.push(obj);
      })
      .catch(err=>{
        this.$Message.error(err.name);
      })
    },
    //确认删除
    ok() {
      let data = {
        id: this.id,
      };
      deleteId(data)
        .then((res) => {
          this.$Message.success("删除成功！");
        })
        .catch(() => {
          this.$Message.error("删除失败！");
        })
        .finally(() => {
          this.modal = false;
          this.getFindAll();
        });
    },
    //取消删除
    cancel() {
      this.modal = false;
    },
    //查询所有积分数据
    getFindAll() {
      this.data = [];
     
      findAll().then((res) => {
        res.data.forEach((item) => {
          let obj = {};
          obj.id = item.id;
          obj.day = item.day;
          obj.point = item.point;
          this.data.push(obj);
        });
      });
    },
    //对话框状态以及各个信息变化
    changeData(bool, data) {
      this.isShow = false;
      if (data && this.title == "新增积分") {
        AddPoint(data).then((res) => {
          this.$Message.success(`${this.title}成功！`);
          this.getFindAll();
        })
        .catch((err)=>{
          this.$Message.error('添加失败');
        })
      }
      if (data && this.title == "编辑") {
        console.log(data);
        updateMsg(data).then(res=>{
          this.$Message.success(`${this.title}成功！`);
          this.getFindAll();
        })
        .catch((err)=>{
          this.$Message.error('编辑失败');
        })
      }
    },
    // 新增会员信息
    AddPointMsg() {
      this.title = "新增积分";
      this.isShow = true;
      this.signPointsId = null;
      this.signPointsDay = null;
      this.signPointsPoint = null;
    },
    //数据重置
    refreshData() {
      this.searchId = "";
      this.getFindAll();
    },
  },
  mounted() {
    this.getFindAll();
  },
};
</script>

<style lang="less" scoped>
.mian_content {
  height: 600px;
  margin-top: 20px;
  .tool_bar {
    width: 626px;
    height: 66px;
    margin-bottom: 20px;
    padding: 10px 15px 10px 15px;
    background-color: #fafafa;
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: #e5e5e5;
    line-height: 44px;
    .searchId {
      width: 160px;
      height: 32px;
    }
  }
  .page{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
}
::v-deep .ivu-modal-header {
  border: none;
}
::v-deep .ivu-modal-footer {
  border: none;
}
</style>
